<script setup>
import {ChromeFilled, Location, Menu as IconMenu, Setting, Sunny, Tickets,Avatar} from "@element-plus/icons-vue";
import {useStore} from "vuex";
import {computed} from "vue";
import {useRouter} from "vue-router";
const router = useRouter();
const store = useStore();

const isCollapse = computed(() => {return store.state.isCollapse})
const isDarkTheme = computed(() => store.state.theme === 'dark');

const goToHome = () => {
  router.push({ path: '/home' });
};

const goToCompany = () => {
  router.push({ path: '/home/Company' });
};

const goRole = () => {
  router.push({ path: '/home/Role' });
};

const goToConsultant=()=>{
  router.push({ path: '/home/consultant' });
}

const goToConsultantFee=()=>{
  router.push({path:'/home/consultantFee'});
}

const goToCourse=()=>{
  router.push({path:'/home/course'})
}

const goToBuyCourse=()=>{
  router.push({path:'/home/buyCourse'})
}
const goToCourseType=()=>{
  router.push({path:'/home/courseType'})
}

const goToArticle=()=>{
  router.push({path:'/home/article'})
}

const goToPsychologyQuestion=()=>{
  router.push({path:'/home/psychologyQuestion'})
}

const goToPsychologyKnowledge=()=>{
  router.push({path:'/home/psychologyKnowledge'})
}

const goToCommunication=()=>{
  router.push({path:'/home/communication'})
}

const goToMember=()=>{
  router.push({path:'/home/member'})
}

const goToAudio=()=>{
  router.push({path:'/home/audio'})
}

const goToAnnouncement=()=>{
  router.push({path:'/home/announcement'})
}
const goToPsychologyTest = () => {
  router.push({path:'/home/psychologyTest'})
}
const goToConsultantSpecialization = () => {
  router.push({ path: '/home/consultantSpecialization' });
};
const goToConsultantAppointment=()=>{
  router.push({path:'/home/consultantAppointment'})
}
const goToshoucang=()=>{
  router.push({path:'/home/shoucang'})
}
const goTojiaoliu=()=>{
  router.push({path:'/home/kechengjiaoliu'})
}
const goTokechengwentibiao=()=>{
  router.push({path:'/home/kechengwenti'})
}


</script>

<template>
<div  :class="{ 'is-collapse': isCollapse }" id="leftMenu">
  <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
  >
    <el-menu-item style="background-color: var(--el-color-primary); text-align: center; height: 50px; color: var( --text-color)">
      <template #title><h1>十方智育</h1></template>
    </el-menu-item>
    <el-menu-item index="1" @click="goToHome"
                  :class="{ 'custom-menu-item': true, 'is-collapse': isCollapse }"
                  :style="{ backgroundColor: isDarkTheme ? 'var(--el-color-primary)' : 'var(--el-color-accent)', color: isDarkTheme ? 'var(--el-color-white)' : 'var(--el-color-black)' }">
      <el-icon><icon-menu /></el-icon>
      <template #title>首页</template>
    </el-menu-item>
    <el-sub-menu index="2" :class="{ 'custom-menu-item': true, 'is-collapse': isCollapse }"
                 :style="{ backgroundColor: isDarkTheme ? 'var(--el-color-primary)' : 'var(--el-color-accent)', color: isDarkTheme ? 'var(--el-color-white)' : 'var(--el-color-black)' }">
      <template #title>
        <el-icon><location /></el-icon>
        <span :class="{ 'custom-menu-item': true, 'is-collapse': isCollapse }"
              :style="{color: isDarkTheme ? 'var(--el-color-white)' : 'var(--el-color-black)' }">咨询管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="1-1" @click="goToConsultant">咨询师管理</el-menu-item>
        <el-menu-item index="1-2" @click="goToConsultantFee">咨询收费管理</el-menu-item>
        <el-menu-item index="1-3" @click="goToConsultantAppointment">预约通知管理</el-menu-item>
        <el-menu-item index="1-4" @click="goToConsultantSpecialization">擅长领域管理</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="3" :class="{ 'custom-menu-item': true, 'is-collapse': isCollapse }"
                 :style="{ backgroundColor: isDarkTheme ? 'var(--el-color-primary)' : 'var(--el-color-accent)', color: isDarkTheme ? 'var(--el-color-white)' : 'var(--el-color-black)' }">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span :class="{ 'custom-menu-item': true, 'is-collapse': isCollapse }"
              :style="{color: isDarkTheme ? 'var(--el-color-white)' : 'var(--el-color-black)' }">课程管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="3-1" @click="goToCourse">课程管理</el-menu-item>
        <el-menu-item index="3-2" @click="goToBuyCourse">购买记录管理</el-menu-item>
        <el-menu-item index="3-3" @click="goToCourseType">课程类型管理</el-menu-item>

      </el-menu-item-group>
    </el-sub-menu>

<!--    <el-menu-item index="4" :class="{ 'custom-menu-item': true, 'is-collapse': isCollapse }"-->
<!--                  :style="{ backgroundColor: isDarkTheme ? 'var(&#45;&#45;el-color-primary)' : 'var(&#45;&#45;el-color-accent)', color: isDarkTheme ? 'var(&#45;&#45;el-color-white)' : 'var(&#45;&#45;el-color-black)' }" @click="goToArticle">-->
<!--      <el-icon><icon-menu /></el-icon>-->
<!--      <template #title>文章管理</template>-->
<!--    </el-menu-item >-->

    <el-sub-menu index="4" :class="{ 'custom-menu-item': true, 'is-collapse': isCollapse }"
                 :style="{ backgroundColor: isDarkTheme ? 'var(--el-color-primary)' : 'var(--el-color-accent)', color: isDarkTheme ? 'var(--el-color-white)' : 'var(--el-color-black)' }">
      <template #title>
        <el-icon><icon-menu /></el-icon>
        <span :class="{ 'custom-menu-item': true, 'is-collapse': isCollapse  }"
              :style="{color: isDarkTheme ? 'var(--el-color-white)' : 'var(--el-color-black)' }">文章管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="4" @click="goToArticle">文章收藏</el-menu-item>
        <el-menu-item index="4-1" @click="goToshoucang">文章收藏</el-menu-item>
        <el-menu-item index="4-2" @click="goTojiaoliu">课程交流</el-menu-item>
        <el-menu-item index="4-3" @click="goTokechengwentibiao">课程问题</el-menu-item>

      </el-menu-item-group>
    </el-sub-menu>




    <el-sub-menu index="5" :class="{ 'custom-menu-item': true, 'is-collapse': isCollapse }"
                 :style="{ backgroundColor: isDarkTheme ? 'var(--el-color-primary)' : 'var(--el-color-accent)', color: isDarkTheme ? 'var(--el-color-white)' : 'var(--el-color-black)' }">
      <template #title>
        <el-icon><Tickets /></el-icon>
        <span :class="{ 'custom-menu-item': true, 'is-collapse': isCollapse }"
              :style="{color: isDarkTheme ? 'var(--el-color-white)' : 'var(--el-color-black)' }">心理管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="5-1" @click="goToPsychologyQuestion">心理答疑管理</el-menu-item>
        <el-menu-item index="5-2" @click="goToPsychologyKnowledge">心理知识管理</el-menu-item>
        <el-menu-item index="5-3" @click="goToPsychologyTest">心理测试管理</el-menu-item>

      </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="6" :class="{ 'custom-menu-item': true, 'is-collapse': isCollapse }"
                  :style="{ backgroundColor: isDarkTheme ? 'var(--el-color-primary)' : 'var(--el-color-accent)', color: isDarkTheme ? 'var(--el-color-white)' : 'var(--el-color-black)' }" @click="goToCommunication">
      <el-icon><ChromeFilled /></el-icon>
      <template #title>私信管理</template>
    </el-menu-item >
    <el-menu-item index="6" :class="{ 'custom-menu-item': true, 'is-collapse': isCollapse }"
                  :style="{ backgroundColor: isDarkTheme ? 'var(--el-color-primary)' : 'var(--el-color-accent)', color: isDarkTheme ? 'var(--el-color-white)' : 'var(--el-color-black)' }" @click="goToMember">
      <el-icon><Avatar /></el-icon>
      <template #title>会员管理</template>
    </el-menu-item >
    <el-sub-menu index="7" :class="{ 'custom-menu-item': true, 'is-collapse': isCollapse }"
                 :style="{ backgroundColor: isDarkTheme ? 'var(--el-color-primary)' : 'var(--el-color-accent)', color: isDarkTheme ? 'var(--el-color-white)' : 'var(--el-color-black)' }">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span :class="{ 'custom-menu-item': true, 'is-collapse': isCollapse }"
              :style="{color: isDarkTheme ? 'var(--el-color-white)' : 'var(--el-color-black)' }">其他管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="7-1" @click="goToAudio">音频管理</el-menu-item>
        <el-menu-item index="7-2" @click="goToAnnouncement">公告管理</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>





  </el-menu>
</div>
</template>

<style scoped>
.is-collapse{
  width: 60px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

</style>